<template>
	<view class="bd">
		<view class="PersonItem" v-for="(item,index) in friendsList" :key="index"
			v-if="item.user.nickname.includes(searchKeyword)" @click="ChatWithSb(item.user.id)">
			<view class="PersonItemPic">
				<!-- 用户头像 -->
				<image src="../../static/user.png" v-if="item.user.avatarurl==''" class="PerPic"></image>
				<image v-else :src="item.user.avatarurl" class="PerPic"></image>
			</view>
			<view class="personMain">
				<view class="PersonItemName">
					<!-- 用户昵称、备注 -->
					<template v-if="item.remark">
						<text>{{ item.remark }}</text>
						<text style="color: #888; margin-left: 0.3rem;">({{ item.user.nickname }})</text>
					</template>
					<text v-else>{{ item.user.nickname }}</text>
				</view>
				<view class="PersonItemNameUnder">
					<!-- 用户最新一条聊天记录 -->
					{{item.user.messageText ? item.user.messageText : '&nbsp;'}}
				</view>
			</view>
			<view class="SendMsg">
				<!-- 点击发送消息，进入聊天框 -->
				<uni-icons type="chatboxes" size="80rpx"></uni-icons>

			</view>
		</view>

		<view class="blank-list-placeholder" v-if="!friendsList.length">空空如也~ 快去寻找搭子吧</view>
	</view>
</template>

<script>
	import {
		partnerList,
		chatSingleList, //获取聊天记录
	} from '@/config/api.js'
	export default {
		props: {
			searchKeyword: {
				type: String,
				default: ''
			},
		},
		onLoad() {
			//this.getFriendsFun()
		},
		mounted() {
			//this.getFriendsFun()
		},
		data() {
			return {
				friendsList: [], //抓取到的好友列表
				friendsListNew: [], // place updated friends list to a new array, preventing flashes on recent messages

				storeImg: '../../static/user.png', //当好友没头像时展示
			}
		},
		methods: {
			//聊天界面的展示
			async addMsgToFriendsList(frdList) {
				const promises = frdList.map(async (item) => {
					const res = await chatSingleList(item.user.id)
					if (res.length) {

						let latestMsg = res.sort((a, b) => new Date(b.sendTime) - new Date(a.sendTime))[0]

						this.$set(item.user, 'messageText', latestMsg.messageText);

						let date = new Date(latestMsg.sendTime)
						if (isNaN(date)) {
							date = new Date(0)
						}
						this.$set(item.user, 'messageTime', date);

						console.log(`got recent msg for id=${item.user.id}: "${item.user.messageText}", time: "${item.user.messageTime}"`);
					}
				})
				await Promise.all(promises)

				frdList.sort((a, b) => b.user.messageTime - a.user.messageTime)
			},

			ChatWithSb(id) {
				// 进入聊天
				uni.navigateTo({
					url: `/pages/ChatWithSb/ChatWithSb?id=${id}`
				})
			},


			// 获取好友列表函数start
			async getFriendsFun() {
				try {
					let res = await partnerList(1);
					console.log('got frd list:', res)

					if (this.friendsList.length > 0) {
						console.log('assigning UPDATED friends list to friendsListNew')
						this.friendsListNew = res

						await this.addMsgToFriendsList(this.friendsListNew)

						console.log('assigning friendsListNew to friendsList')
						this.friendsList = this.friendsListNew

					} else {
						console.log('assigning FIRST-TIME-GOT friends list to friendsList')
						this.friendsList = res

						await this.addMsgToFriendsList(this.friendsList)

						console.log('NOT assigning friendsListNew to friendsList')
					}

				} catch (err) {
					console.error(err)
				}
			}
		}

	}
</script>

<style scoped>
	.PerPic {
		display: block;
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.SendMsg {
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.PersonItemName {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.PersonItemNameUnder {
		font-size: 0.8rem;
		color: #999;
		font-weight: 400;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.personMain {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-flow: column;
		gap: 6rpx;
	}

	.PersonItem {
		width: 95%;
		box-sizing: border-box;
		margin: 0 auto 20rpx;
		padding: 16rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
		border-radius: 20rpx;

		background-color: white;
	}
</style>